<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        * {
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: white;
        }

        main {
            width: 600px;
            height: 800px;
            margin: 0 auto;
            background-color: #aaa;
        }

        .div-one {
            width: 400px;
            height: 500px;
            background-color: #ffffff;
            margin: 0px auto;
            text-align: center;
            position: relative;
            top: 10px;
            /* border: 2px solid gold; */
        }

        nav {
            width: 380px;
            height: 580px;
            margin: 0px auto;
            text-align: center;
            position: relative;
            top: 10px;
        }

        p {
            display: inline-block;
            width: 320px;
            height: 100px;
            font-size: 13px;
            color: #555;
        }

        footer {
            margin: 20px auto;
            width: 400px;
            height: 200px;
             /* border: 1px solid violet;  */
            background-color: #ffffff;
        }

        section {
            margin: 10px auto;
            /* border: 1px solid red; */
            width: 380px;
            height: 180px;
            display: flex;
            position: relative;
        }

        span {
            display: inline-block;
            width: 175px;
            height: 175px;
            margin-left: 10px;
            margin-top: 10px;
        }

        .necklace {
            display: inline-block;
            width: 175px;
            height: 175px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            margin-left: -175px;
            overflow: hidden;
            opacity: 0;
           
        }

         .clothes {
            display: inline-block;
            width: 175px;
            height: 175px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            margin-left: -175px;
            overflow: hidden;
             opacity: 0;
        } 

        article {
            width: 175px;
            height: 175px;
            display: inline-block;
            font-size: 13px;
        }
        .necklace-introduce{
            margin-top: 60px;
            width: 175px;
            height: 100px;
            margin-left: -175px;
        }
        .clothes-introduce{
            margin-top: 60px;
            width: 175px;
            height: 100px;
            margin-left: -175px;
        }
    </style>
</head>

<body>
    <main>
        <div class="div-one">
            <nav>
                <a href="#"><img src="遮罩层\2.jpg" alt="">
                <p>【翩若】惊鸿婉若游龙。荣曜秋菊，华茂春松。仿佛兮若轻云之蔽月，飘摇兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷。</p></a>
            </nav>
        </div>
        <footer>
            <section>
                <div>
                    <span>
            <img src="遮罩层\1.jpg" alt="">
                <a href="#" class="necklace">
               <div class="necklace-introduce">
                <i>荣曜秋菊</i>
                <article>惊鸿婉若游龙仿佛兮若轻云之蔽月,飘摇兮若流风之回雪。
            </article>
            </div>
           </a>
            </span>
                </div>
                <div>
                    <span>
                <img src="遮罩层\3.jpg" alt="">
                <a href="#" class="clothes">
               <div class="clothes-introduce">
                 <i>华茂春松</i>
                <article>仿佛兮若轻云之蔽月飘摇兮若流风之回雪,皎若太阳升朝霞
                </article>   
                </div></a>
            </span>
                </div>
            </section>
        </footer>
    </main>

    <script src="./jquery.js"></script>
</body>

</html>
<script>
$(function(){
    
     $('.div-one').hover(function(){
     $(this).css('border','2px solid gold');
 },function(){
        $('.div-one').css('border','0')
    });


     $('.clothes').hover(function(){
        $(this).stop().animate({opacity:1},500);
        $('.clothes-introduce').stop().animate({marginLeft:0},1000);
    },function(){
         $(this).stop().animate({opacity:0},500);
         $('.clothes-introduce').stop().animate({marginLeft:-175},1000);
    });
        

     $('.necklace').hover(function(){
        $(this).stop().animate({opacity:1},500);
        $('.necklace-introduce').stop().animate({marginLeft:0},1000);
    },function(){
         $(this).stop().animate({opacity:0},500);
         $('.necklace-introduce').stop().animate({marginLeft:-175},1000);
    });
        
 





})
</script>